import React from "react";
import { Breadcrumb, Table, Button } from "antd";

import ExportJsonExcel from "js-export-excel";

const dataSource = [
  {
    key: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号",
  },
  {
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号",
  },
];

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
];

const Index = () => {
  const exp = () => {
    var option = {};

    // 设置文件的名字
    option.fileName = "个人信息";

    option.datas = [
      // 每一个对象对应一个工作表
      {
        // 导出的数据
        sheetData: dataSource,
        // 工作表的名字
        sheetName: "sheet",
        // 关联字段的
        sheetFilter: ["name", "age", "address"],
        // 列标题
        sheetHeader: ["姓名", "年龄", "住址"],
        columnWidths: [15, 15, 15],
      },
    ];

    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  };
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <Breadcrumb
          style={{ marginBottom: 20 }}
          items={[
            {
              title: "文件处理",
            },
            {
              title: "excel导出",
            },
          ]}
        />
        <Button onClick={exp}>excel导出</Button>
      </div>

      <Table dataSource={dataSource} columns={columns} />
    </div>
  );
};

export default Index;
